<script setup>

import {ArrowRight} from "@element-plus/icons-vue";

import {onBeforeUnmount, onMounted, ref} from 'vue';
import * as echarts from 'echarts';

const chartContainer = ref(null);
const chartInstance = ref(null);

onMounted(() => {
  if (chartContainer.value !== null) {
    chartInstance.value = echarts.init(chartContainer.value);
    const option = {
      // ECharts 配置项
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'category',
        data: ['玉米', '豆浆', '饺子', '包子', '牛奶', '油条']
      },
      series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }]
    };
    chartInstance.value.setOption(option);
  }
});

// 在组件销毁前，销毁 ECharts 实例，以避免内存泄漏
onBeforeUnmount(() => {
  if (chartInstance.value !== null) {
    chartInstance.value.dispose();
  }
});
</script>

<template>
  <!-- 面包屑 -->
  <div>
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>日常管理</el-breadcrumb-item>
      <el-breadcrumb-item>伙食管理</el-breadcrumb-item>
      <el-breadcrumb-item><b>伙食信息汇总</b></el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <div ref="chartContainer" style="width: 600px; height: 400px;"></div>
</template>

<style scoped>
.el-breadcrumb{
  font-size: 18px;
  margin: 20px;
}
</style>